<template>
	<view class="home-wrapper">
		<!-- header -->
		<home-header :haveDevice="haveDevice" :device="device"></home-header>
		<!-- /header -->
		<view v-if="haveDevice">
			<!-- overview -->
			<home-overview :device="device"></home-overview>
			<!-- /overview -->
			<!-- 定量出水 -->
			<!--<home-set :device="device" @sendmsg="sendMsg" ref="waterout"></home-set>-->
			<!-- /定量出水 -->
			<!-- 重启设备 -->
			<home-reset-dev :device="device"></home-reset-dev>
			<!-- /重启设备 -->
			<!-- 设备基本信息 -->
			<home-monitor :device="device" @setVoice="showVoiceSet"></home-monitor>
			<!-- /设备基本信息 -->
			<!-- 平台服务 -->
			<home-gird-nav></home-gird-nav>
			<!-- /平台服务 -->
		</view>
		<view v-else>
			<home-empty></home-empty>
		</view>
		<!-- <u-button type="success" @click="udplink()">连接udp</u-button> -->
		<!-- <u-button type="success" @click="sendMsg()">udp广播</u-button> -->
		<u-popup v-model="voiceShow" mode="center" width="600rpx" height="150px" border-radius="20">
			<view class="voice-content u-flex-col u-m-50">
				<view class="u-flex u-m-b-40">
					<view>当前音量：{{voiceNums}}%</view>
					<view class="u-flex" style="margin-left: auto;">
						<view class="u-m-r-10">音量开关</view> 
						<u-switch v-model="voiceOpen" @change="setVoiceOnOff"></u-switch>
					</view>
				</view>
				<view class="u-m-10">
					<u-slider v-model="voiceNums" :disabled="!voiceOpen" step="10" height="30" block-width="50"></u-slider>
				</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import homeHeader from './index/home-header.vue';
	import homeOverview from './index/home-overview.vue';
	// import homeSet from './index/home-set.vue';
    import homeResetDev from './index/home-reset-dev.vue';
	import homeMonitor from './index/home-monitor.vue';
	import homeGirdNav from './index/home-grid-nav.vue';
	import homeEmpty from './index/home-empty.vue';
	export default {
		components: {
			homeHeader,
			homeOverview,
			// homeSet,
            homeResetDev,
			homeMonitor,
			homeGirdNav,
			homeEmpty
		},
		data() {
			return {
				haveDevice:false,
				device:{},
				volumeOpen:true,
				ip: '',
				port: '8266',
				localPort: '7888',
				message: '你好啊！',
				listBytes: ['53', '53', '01', 'c0', '00', 'A9', '09', '10', '11', '12', '19', '20', 'ff', 'ff', '4E', '4E'],
				waterOutVal:0.0,
				wxUdp:null,
				voiceShow:false,
				voiceNums:0,
				voiceOpen:false
			};
		},
		computed: {
			
		},
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {},
		onShow() {
			let token = uni.getStorageSync("token");
			if(token){
				this.getDeviceInfo();
			}
			else{
				uni.navigateTo({
					url:'/pages/public/login'
				});
				return false;
			}
		},
		created() {
		},
		onHide() {},
		onLoad() {
			
		},
		watch:{
			voiceNums(oldVal,newVal){
				if(this.voiceOpen){
					this.setVolume();
				}
			}
		},
		methods: {
			getDeviceInfo(){
				let device_id = uni.getStorageSync("device_id");
				let param = {};
				if(device_id){
					param.device_id = device_id;
				}
				this.$get("/api/device/index",param,'',false).then(res => {
					console.log(res);
					if(res.code == 0){
						this.haveDevice = false;
					}
					else{
						this.haveDevice = true;
						this.device = res.data;
						this.voiceNums = this.device.volume;
						this.voiceOpen = this.device.volume_open ? true : false;
						if(this.device.ip != ''){
							this.ip = this.device.ip;
							this.udplink();
						}
					}
				})
			},
			getAcce(){
			},
			showVoiceSet(){
				this.voiceShow = true;
			},
			udplink(){
				// this.$socket.init(_self.ip, _self.port);
				// #ifdef MP-WEIXIN
				this.wxUdp = wx.createUDPSocket();
				const port = this.wxUdp.bind();
				let message = {"cmd":"getstatus"};
				this.wxUdp.send({
					address:this.ip,
					port:8266,
					message:JSON.stringify(message)
				})
				this.wxUdp.onMessage((res) => {
					let unit8Arr = new Uint8Array(res.message);
					let encodedString = String.fromCharCode.apply(null, unit8Arr);
					let message = decodeURIComponent(escape((encodedString)));
					let arr = JSON.parse(message);
					this.showUdpMsg(arr);
				});
				// console.log(udp_result);
				// #endif
				// #ifdef APP-PLUS
				let that = this;
				console.log(this.ip,this.port);
				this.$socket.init(this.ip, this.port);
				this.$socket.receivedStatus = function(status) {
					//服务器返回状态
					console.log(status);
					if (status == '0') {
						//UDP连接成功
						console.log('连接成功');
						let message = {"cmd":"getstatus"};
						that.$socket.send(message);
					} else if (status == '1') {
						uni.showModal({
							title:"系统提示",
							content:'连接断开，请检查饮水机网络状态',
							showCancel:false
						})
						//UDP断开连接
						console.log('断开连接');
					}
				};
				this.$socket.receivedMsgCallBack = function(receivedMsg) {
					console.log(receivedMsg);
					let arr = JSON.parse(receivedMsg);
					console.log(arr.cmd);
					this.showUdpMsg(arr);
					//服务器返回字符串
					// console.log(receivedMsg);
				};
				// this.$socket.receivedHexMsgCallBack = function(receivedHexMsg) {
				// 	//硬件服务器返回16进制数据
				// 	console.log(receivedHexMsg);
				// 	let msg = receivedHexMsg;
				// 	let sum = msg.length / 2;
				// 	let arr = [];
				// 	for (let k = 0; k < sum; k++) {
				// 		let i = msg.substring(k * 2, k * 2 + 2);
				// 		arr.push(i);
				// 	}
				// 	console.log(arr);
				// };
				// #endif
			},
			showUdpMsg(arr){
				let that = this;
				if(arr.cmd == 'setparameter'){
					that.$refs['waterout'].setWaterOut(arr.data.qutfyputout);
					if(that.waterOutVal == arr.data.qutfyputout){
						uni.showModal({
							title:"系统提醒",
							content:'出水完成',
							showCancel:false
						})
					}
				}
				else if(arr.cmd == 'getstatus'){
					that.device.ys_tds = arr.data.TDS_INPUT;
					that.device.cs_tds = arr.data.TDS_RO;
					that.device.khs_tds = arr.data.TDS_MIRFT;
					that.device.water_percent = arr.data.makewater;
					that.device.water_temperature = arr.data.wttemp;
				}
				else if(arr.cmd == 'getsound'){
					that.voiceNums = arr.data.volume;
					that.voiceOpen = arr.data.open ? true : false;
				}
			},
			sendudp(){
				
			},
			/**
			 * 单播--发送字符串
			 */
			sendMsg(value,purewater) {
				this.waterOutVal = value;
				let message = {};
				message.cmd = 'setparameter';
				message.data = {};
				message.data['qutfyputout'] = value;
				message.data['purewater'] = purewater;
				message.data['mineralizewater'] = purewater ? 0 : 1;
				// #ifdef APP-PLUS
				this.$socket.send(message);
				// #endif
				// #ifdef MP-WEIXIN
				this.wxUdp.send({
					address:this.ip,
					port:8266,
					message:JSON.stringify(message)
				});
				// #endif
			},
			setVolume(){
				if(this.voiceShow){
					let message = {};
					message.device_id = this.device.device_id;
					message.volume = this.voiceNums;
					console.log(message);
					this.$post("/api/device/set_volume",message).then(res => {
						if(res.code == 1){
							this.$u.toast("操作成功");
						}
					});
				}
			},
			setVoiceOnOff(){
				if(this.voiceShow){
					let message = {};
					message.device_id = this.device.device_id;
					message.voiceopen = this.voiceOpen ? 1 : 0;
					if(!this.voiceOpen){
						this.voiceNums = 0;
					}
					this.$post("/api/device/set_volume",message).then(res => {
						if(res.code == 1){
							this.$u.toast("操作成功");
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	page{
		background-color: #f9f9f9;
		height: auto;
		min-height: 100%;
	}
</style>
